<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>填写预约信息</title>
    <!--本页的样式-->
    <!--<link rel="stylesheet" type="text/css" href="css/new_information.css" />-->
    <!--公共的样式-->
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../common_css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/input_password_css.css" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/LCalendar.css">
    <script src="../common_js/common_font.js"></script>
    <style type="text/css">
        html,
        body {
            font-size: 0.14rem;
        }
        /*最外层div*/

        .big {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        /*头部*/

        .top {
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            background-color: #21538D;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            font-size: 0.18rem;
        }
        /*头部字体*/

        .topmid {
            color: white;
            font-size: 0.18rem;
        }
        /*返回按钮*/

        .topback {
            font-size: 0.14rem;
            position: absolute;
            left: 0px;
            color: white;
        }
        /*头部的返回箭头*/

        .icon-myback {
            font-size: 0.25rem;
        }
        /*身体*/

        .news_information_body {
            width: 100%;
            /*border: 1px solid red;*/
            margin-top: 0.5rem;
        }
        /*<!--含头像那一栏-->/*/

        .news_information_body_header {
            width: 100%;
            height: 0.56rem;
            /*border: 1px solid;*/
            background-color: white;
        }

        .news_information_body_header_center {
            width: 93%;
            height: 0.56rem;
            /*border: 1px solid orange;*/
            background-color: white;
            margin: auto;
            line-height: 0.56rem;
        }
        /*放头像的div*/

        .header_center_img {
            width: 0.4rem;
            height: 0.4rem;
            /*border: 1px solid blue;*/
            margin: 0.08rem 0.1rem 0px 0px;
            /*border-radius: 0.4rem;*/
            float: left;
        }

        .header_center_img img {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 0.4rem;
        }
        /*name和代号*/

        .header_center_content {
            float: left;
            height: 0.56rem;
            line-height: 0.56rem;
        }
        /*name*/

        .header_center_content_name {
            font-family: "PingFangSC-Regular";
            font-size: 0.15rem;
            color: #323232;
            letter-spacing: 0.71px;
        }
        /*代号*/

        .header_center_content_num {
            font-family: "PingFangSC-Regular";
            opacity: 0.8;
            font-size: 0.14rem;
            color: rgba(50, 50, 50, 0.50);
            letter-spacing: 0.57px;
            margin-left: 0.05rem;
        }
        /*选择约见类型*/

        .choose_appointment_type {
            width: 100%;
            height: 1.7rem;
            /*border: 1px solid red;*/
            margin-top: 0.2rem;
            background-color: white;
        }

        #choose_appointment_type {
            width: 93%;
            height: 1.7rem;
            /*border: 1px solid red;*/
            margin: auto;
        }

        .choose_appointment_type_1 {
            width: 100%;
            height: 0.4rem;
            line-height: 0.4rem;
            /*border: 1px solid blue;*/
            font-family: "PingFangSC-Regular";
            font-size: 0.16rem;
            color: #323232;
            letter-spacing: 0.35px;
        }

        #demo1 {
            text-align: right;
            width: 79%;
        }

        .choose_appointment_type_2 {
            width: 100%;
            height: 1.3rem;
            /*border: 1px solid green;*/
        }

        .choose_appointment_type_2 p span {
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            font-size: 0.12rem;
            margin-top: 0.1rem;
            line-height: 0.3rem;
            width: 20%;
            height: 0.3rem;
            border: 1px solid rgba(107, 107, 107, 0.40);
            color: rgba(107, 107, 107, 0.40);
        }
        /*<!--行价哪一行-->*/

        .cost {
            background-color: white;
            height: 0.5rem;
            line-height: 0.5rem;
            padding: 0px 0.1rem;
            margin-top: 0.02rem;
            font-size: 0.14rem;
        }

        .red {
            color: #FF2929;
        }

        .cost>div {
            float: right;
        }

        .count img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            vertical-align: middle;
            margin-top: -2px;
        }

        .type {
            background-color: white;
            height: 0.5rem;
            line-height: 0.5rem;
            padding: 0px 0.1rem;
            font-size: 0.14rem;
            /*border-bottom: 1px solid #F7F7F7;*/
        }

        .type span:last-of-type {
            float: right;
            color: #C4C4C4;
        }
        /*固定在底部的立即预约按钮*/

        .pay {
            position: fixed;
            display: -webkit-box;
            background-color: white;
            bottom: 0px;
            left: 0px;
            width: 100%;
            font-size: 0.14rem;
        }

        .pay div {
            width: 50%;
            text-align: center;
            height: 0.4rem;
            line-height: 0.4rem;
            font-size: 0.14rem;
        }

        .pay div:last-child {
            background-color: #21538D;
            color: white;
        }
        /*转让购买的支付弹出框*/

        .zhuangranggoumai_pay {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            /*border: 1px solid red;*/
        }

        .buy_pay_bottom {
            position: absolute;
            bottom: 0px;
            left: 0px;
            /*border: 1px solid blue;*/
            width: 100%;
            height: 2rem;
            /*background-color: white;*/
        }

        .buy_pay_bottom_shang {
            width: 100%;
            height: 1.5rem;
            /*border: 1px solid red;*/
            background-color: white;
            border-radius: 20px;
        }

        .buy_pay_bottom_shang_1 {
            width: 100%;
            height: 0.5rem;
            /*line-height: 0.5rem;*/
            text-align: center;
            border-bottom: 2px solid #F7F7F7;
            min-width: 320px;
            /*border: 1px solid yellow;*/
        }

        .buy_pay_bottom_shang_1_center {
            width: 50%;
            height: 0.5rem;
            /*border: 1px solid blue;*/
            margin: 0px auto;
            /*line-height: 0.5rem;*/
            text-align: center;
            box-sizing: border-box;
            min-width: 320px;
        }

        #shang_1_center {
            width: 42vw;
            height: 0.5rem;
            margin: auto;
            /*border: 1px solid yellow;*/
            line-height: 0.5rem;
        }

        .buy_pay_bottom_shang_1_center_img {
            float: left;
            height: 0.46rem;
            width: 0.30rem;
            /*line-height: 0.46rem;*/
            margin-left: 0.15rem;
            /*border: 1px solid green;*/
            position: relative;
        }

        .buy_pay_bottom_shang_1_center_img img {
            width: 0.25rem;
            height: 0.25rem;
            position: absolute;
            /*border: 1px solid red;*/
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .buy_pay_bottom_shang_1_center_name {
            font-size: 0.16rem;
            font-weight: bold;
            float: left;
            margin-left: 0.1rem;
            /*border: 1px solid blue;*/
            /*width:90px;*/
            /*height: 30px;*/
        }

        .buy_pay_bottom_xia {
            width: 100%;
            height: 0.4rem;
            /*border: 1px solid green;*/
            line-height: 0.4rem;
            text-align: center;
            font-size: 0.16rem;
            background-color: white;
            border-radius: 10px;
            margin-top: 0.05rem;
        }
        /*//请输入支付密码弹出框*/

        .zhuangranggoumai_pay_2 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            /*border: 1px solid red;*/
        }
        /*输入的密码框*/

        .sure_order_content_input {
            width: 100%;
            height: 50px;
            /*border: 1px solid blue;*/
        }

        .sure_order_content_input input {
            width: 16.66%;
            height: 40px;
            float: left;
            border: 1px solid #6B6B6B;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            margin-top: 5px;
        }

        .sure_order_content_2 {
            width: 100%;
            height: 310px;
            /*border: 1px solid red;*/
            position: absolute;
            bottom: 0px;
            background-color: white;
        }

        .sure_order_content_word {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #6B6B6B;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            color: #323232;
            letter-spacing: 0.76px;
        }

        .sure_order_content_word_1 {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #6B6B6B;
            line-height: 40px;
            font-size: 14px;
            letter-spacing: 0.67px;
        }

        .sure_order_1 {
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: rgba(107, 107, 107, 0.40);
            letter-spacing: 0.67px;
            margin-left: 3.2%;
        }

        .sure_order_2 {
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: #323232;
            letter-spacing: 0.67px;
            margin-left: 10px;
        }

        .sure_order_3 {
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: rgba(107, 107, 107, 0.40);
            letter-spacing: 0.67px;
            margin-left: 10px;
        }

        .sure_order_4 {
            font-family: "PingFangSC-Regular";
            font-size: 9px;
            color: rgba(107, 107, 107, 0.40);
            letter-spacing: 0.43px;
            margin-left: 10px;
        }

        .sure_order_content_word_2 {
            width: 100%;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /*border: 1px solid blue;*/
        }

        .sure_order_5 {
            /*font-family: "PingFangSC-Regular";*/
            font-size: 6px !important;
            color: rgba(-2147483648, -2147483648, -2147483648, 0.40);
            /*line-height: 10px;*/
        }

        .sure_order_6 {
            /*font-family: "PingFangSC-Regular";*/
            font-size: 6px !important;
            color: #21538D;
            /*line-height: 10px;*/
        }

        .sure_order_content_word_3 {
            width: 93%;
            height: 35px;
            background: #1E5390;
            border-radius: 6px;
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0.67px;
            text-align: center;
            line-height: 35px;
            margin: auto;
            margin-top: 10px;
        }

        .sure_order_content_1 {
            width: 100%;
            height: 120px;
            /*border: 1px solid red;*/
            position: absolute;
            bottom: 0px;
            background-color: white;
        }

        .zhuanrangsucess {
            width: 120px;
            height: 40px;
            background-color: black;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            color: white;
            font-size: 14px;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            display: none;
        }

        .contact_info {
            height: .4rem;
            line-height: .4rem;
            color: #21538D;
            font-size: .14rem;
            padding-left: .1rem;
        }

        .info {
            background-color: white;
            padding: .1rem;
            height: 2.1rem;
        }

        .infodiv {
            display: -webkit-box;
            height: .5rem;
            line-height: .5rem;
            font-size: .16rem;
        }

        .infodiv div:first-of-type {
            width: .6rem;
        }

        .infodiv div:last-of-type {
            -webkit-box-flex: 1;
            border-bottom: 1px solid #D8D8D8;
        }

        .infodiv input {
            font-size: 0.12rem;
            outline: none;
            width: 100%;
            border: 0px;
        }
        .iconfont{
           float: right;
       }
       .fff {
        display: inline-block;
        width: auto;
        float: right;
    }
    .note {
        border: 0px !important;
        padding: .15rem 0px;
        height: 1rem;
        /*border: 1px solid red;*/
        line-height: .2rem !important;
        color: #A9A9A9;
        outline: none;
        background-color: white;
        font-size: .12rem;
        overflow: auto;
    }

    .rule {
        height: .5rem;
        line-height: .5rem;
        color: #21538D;
        padding-left: .1rem;
        font-size: .14rem;
        margin-bottom: .6rem;
    }

    .pay {
        position: fixed;
        display: -webkit-box;
        background-color: white;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }

    .pay div {
        width: 50%;
        text-align: center;
        height: .4rem;
        line-height: .4rem;
    }

    .pay div:last-child {
        background-color: #21538D;
        color: white;
    }

    .typediv {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 100;
        display: none;
    }

    .orderdiv {
        position: absolute;
        bottom: 0.01rem;
        left: 0px;
        width: 100%;
    }

    .orderdiv > div {
        margin: 0px .1rem;
        background-color: white;
        border-radius: 10px;
        font-size: .14rem;
    }

    .ordertop {
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        font-size: .14rem;
    }

    .ordermain {
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        border-top: 1px solid #717171;
    }
    .typespan{
        height: .48rem;
        /*border: 1px solid red;*/
        float: right;
        line-height: .48rem;
        font-family: "PingFangSC-Regular";
        font-size: 0.14rem;
        color: rgba(107, 107, 107, 0.40);
        letter-spacing: 0.35px;
        display: inline-block;
        width: 31%;
    }
</style>
</head>

<body>
    <!--最外侧的div-->
    <div class="big">
        <!--头部-->
        <div class="top">
            <span class="topback"><i class="iconfont icon-back icon-myback"></i></span>
            <span class="topmid">填写预约信息</span>
        </div>
        <!--身体-->
        <div class="news_information_body">
            <!--含头像那一栏-->
            <div class="news_information_body_header">
                <div class="news_information_body_header_center">
                    <div class="header_center_img"><img src="../commonimg/chatimg8.jpg" /></div>
                    <div class="header_center_content"><span class="header_center_content_name">雯雯</span><span class="header_center_content_num">800001</span></div>
                </div>
            </div>
            <!--选择约见类型-->
            <div class="choose_appointment_type">
                <div id="choose_appointment_type">
                    <div class="choose_appointment_type_1">
                        选择约见类型
                    </div>
                    <div class="choose_appointment_type_2">
                        <p><span>下午茶</span> <span>公益活动</span> <span>公益活动</span> <span>视频交流</span></p>
                        <p><span>电视剧</span> <span>广告</span> <span>电影</span> <span>录制节目</span></p>
                        <p><span>剧组探班</span></p>
                    </div>
                </div>
            </div>
            <!--行价哪一行-->
            <div class="cost">
                <span>预约时间（秒）</span>
                <div class="count">
                    <img src="img/减@2x.png" />
                    <span class="num">123123</span>
                    <img src="img/加@2x.png" />
                </div>
            </div>
            <!--请选择您的预约类型-->
            <div class="type" style="margin-top: 10px;">
                <span>
                   约见城市
               </span>
               <span class="typespan"><i class="iconfont icon-more icon-mymore"></i><font class="wbk_srn select_show select_gr fff" id="gr_zone_ids" data-id="130100">上海</font></span>
               <div class="container" style="z-index: 9999; ">
                <div class="city">
                    <div class="city-list"><span class="city-letter" id="A1">A</span>
                        <p data-id="210300">鞍山市</p>
                        <p data-id="152900">阿拉善盟</p>
                        <p data-id="340800">安庆市</p>
                        <p data-id="410500">安阳市</p>
                        <p data-id="542500">阿里地区</p>
                        <p data-id="610900">安康市</p>
                        <p data-id="520400">安顺市</p>
                        <p data-id="513200">阿坝藏族羌族自治州</p>
                        <p data-id="659002">阿拉尔市</p>
                        <p data-id="652900">阿克苏地区</p>
                        <p data-id="820100">澳门特别行政区</p>
                        <p data-id="654300">阿勒泰地区</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="B1">B</span>
                        <p data-id="220800">白城市</p>
                        <p data-id="150200">包头市</p>
                        <p data-id="150800">巴彦淖尔市</p>
                        <p data-id="130600">保定市</p>
                        <p data-id="210500">本溪市</p>
                        <p data-id="220600">白山市</p>
                        <p data-id="341600">亳州市</p>
                        <p data-id="340300">蚌埠市</p>
                        <p data-id="371600">滨州市</p>
                        <p data-id="620400">白银市</p>
                        <p data-id="610300">宝鸡市</p>
                        <p data-id="530500">保山市</p>
                        <p data-id="469030">白沙黎族自治县</p>
                        <p data-id="451000">百色市</p>
                        <p data-id="522401">毕节市</p>
                        <p data-id="450500">北海市</p>
                        <p data-id="511900">巴中市</p>
                        <p data-id="469035">保亭黎族苗族自治县</p>
                        <p data-id="652800">巴音郭楞蒙古自治州</p>
                        <p data-id="652700">博尔塔拉蒙古自治州</p>
                        <p data-id="110100">北京市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="C1">C</span>
                        <p data-id="140400">长治市</p>
                        <p data-id="130900">沧州市</p>
                        <p data-id="320400">常州市</p>
                        <p data-id="330282">慈溪市</p>
                        <p data-id="320581">常熟市</p>
                        <p data-id="130800">承德市</p>
                        <p data-id="150400">赤峰市</p>
                        <p data-id="220100">长春市</p>
                        <p data-id="431000">郴州市</p>
                        <p data-id="430100">长沙市</p>
                        <p data-id="341100">滁州市</p>
                        <p data-id="430700">常德市</p>
                        <p data-id="341400">巢湖市</p>
                        <p data-id="341700">池州市</p>
                        <p data-id="469027">澄迈县</p>
                        <p data-id="451400">崇左市</p>
                        <p data-id="469031">昌江黎族自治县</p>
                        <p data-id="532300">楚雄彝族自治州</p>
                        <p data-id="445100">潮州市</p>
                        <p data-id="500100">重庆市</p>
                        <p data-id="510100">成都市</p>
                        <p data-id="542100">昌都地区</p>
                        <p data-id="652300">昌吉回族自治州</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="D1">D</span>
                        <p data-id="232700">大兴安岭地区</p>
                        <p data-id="140200">大同市</p>
                        <p data-id="230600">大庆市</p>
                        <p data-id="321181">丹阳市</p>
                        <p data-id="210200">大连市</p>
                        <p data-id="210600">丹东市</p>
                        <p data-id="370500">东营市</p>
                        <p data-id="371400">德州市</p>
                        <p data-id="511700">达州市</p>
                        <p data-id="532900">大理白族自治州</p>
                        <p data-id="469003">儋州市</p>
                        <p data-id="469025">定安县</p>
                        <p data-id="533400">迪庆藏族自治州</p>
                        <p data-id="510600">德阳市</p>
                        <p data-id="469007">东方市</p>
                        <p data-id="533100">德宏傣族景颇族自治州</p>
                        <p data-id="441900">东莞市</p>
                        <p data-id="621100">定西市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="E1">E</span>
                        <p data-id="150600">鄂尔多斯市</p>
                        <p data-id="420700">鄂州市</p>
                        <p data-id="422800">恩施土家族苗族自治州</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="F1">F</span>
                        <p data-id="210900">阜新市</p>
                        <p data-id="210400">抚顺市</p>
                        <p data-id="350181">福清市</p>
                        <p data-id="341200">阜阳市</p>
                        <p data-id="370983">肥城市</p>
                        <p data-id="361000">抚州市</p>
                        <p data-id="350100">福州市</p>
                        <p data-id="440600">佛山市</p>
                        <p data-id="450600">防城港市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="G1">G</span>
                        <p data-id="440100">广州市</p>
                        <p data-id="360700">赣州市</p>
                        <p data-id="510800">广元市</p>
                        <p data-id="511600">广安市</p>
                        <p data-id="450300">桂林市</p>
                        <p data-id="450800">贵港市</p>
                        <p data-id="520100">贵阳市</p>
                        <p data-id="513300">甘孜藏族自治州</p>
                        <p data-id="623000">甘南藏族自治州</p>
                        <p data-id="640400">固原市</p>
                        <p data-id="632600">果洛藏族自治州</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="H1">H</span>
                        <p data-id="231100">黑河市</p>
                        <p data-id="211400">葫芦岛市</p>
                        <p data-id="330481">海宁市</p>
                        <p data-id="320800">淮安市</p>
                        <p data-id="131100">衡水市</p>
                        <p data-id="150100">呼和浩特市</p>
                        <p data-id="330500">湖州市</p>
                        <p data-id="230400">鹤岗市</p>
                        <p data-id="150700">呼伦贝尔市</p>
                        <p data-id="230100">哈尔滨市</p>
                        <p data-id="130400">邯郸市</p>
                        <p data-id="330100">杭州市</p>
                        <p data-id="410600">鹤壁市</p>
                        <p data-id="371700">菏泽市</p>
                        <p data-id="420200">黄石市</p>
                        <p data-id="431200">怀化市</p>
                        <p data-id="340600">淮北市</p>
                        <p data-id="421100">黄冈市</p>
                        <p data-id="430400">衡阳市</p>
                        <p data-id="340100">合肥市</p>
                        <p data-id="340400">淮南市</p>
                        <p data-id="341000">黄山市</p>
                        <p data-id="451200">河池市</p>
                        <p data-id="460100">海口市</p>
                        <p data-id="441600">河源市</p>
                        <p data-id="532500">红河哈尼族彝族自治州</p>
                        <p data-id="441300">惠州市</p>
                        <p data-id="610700">汉中市</p>
                        <p data-id="451100">贺州市</p>
                        <p data-id="632800">海西蒙古族藏族自治州</p>
                        <p data-id="632100">海东市</p>
                        <p data-id="632300">黄南藏族自治州</p>
                        <p data-id="652200">哈密地区</p>
                        <p data-id="632200">海北藏族自治州</p>
                        <p data-id="653200">和田地区</p>
                        <p data-id="632500">海南藏族自治州</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="J1">J</span>
                        <p data-id="210700">锦州市</p>
                        <p data-id="330700">金华市</p>
                        <p data-id="140700">晋中市</p>
                        <p data-id="320281">江阴市</p>
                        <p data-id="220200">吉林市</p>
                        <p data-id="230800">佳木斯市</p>
                        <p data-id="230300">鸡西市</p>
                        <p data-id="330400">嘉兴市</p>
                        <p data-id="140500">晋城市</p>
                        <p data-id="350582">晋江市</p>
                        <p data-id="370282">即墨市</p>
                        <p data-id="360800">吉安市</p>
                        <p data-id="370100">济南市</p>
                        <p data-id="420800">荆门市</p>
                        <p data-id="410800">焦作市</p>
                        <p data-id="370800">济宁市</p>
                        <p data-id="410881">济源市</p>
                        <p data-id="421000">荆州市</p>
                        <p data-id="360400">九江市</p>
                        <p data-id="360200">景德镇市</p>
                        <p data-id="445200">揭阳市</p>
                        <p data-id="620300">金昌市</p>
                        <p data-id="440700">江门市</p>
                        <p data-id="620200">嘉峪关市</p>
                        <p data-id="620900">酒泉市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="K1">K</span>
                        <p data-id="320583">昆山市</p>
                        <p data-id="410200">开封市</p>
                        <p data-id="530100">昆明市</p>
                        <p data-id="650200">克拉玛依市</p>
                        <p data-id="653000">克孜勒苏柯尔克孜自治州</p>
                        <p data-id="653100">喀什地区</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="L1">L</span>
                        <p data-id="141000">临汾市</p>
                        <p data-id="131000">廊坊市</p>
                        <p data-id="211000">辽阳市</p>
                        <p data-id="220400">辽源市</p>
                        <p data-id="141100">吕梁市</p>
                        <p data-id="320700">连云港市</p>
                        <p data-id="371200">莱芜市</p>
                        <p data-id="411100">漯河市</p>
                        <p data-id="331100">丽水市</p>
                        <p data-id="341500">六安市</p>
                        <p data-id="431300">娄底市</p>
                        <p data-id="350800">龙岩市</p>
                        <p data-id="370681">龙口市</p>
                        <p data-id="371300">临沂市</p>
                        <p data-id="410300">洛阳市</p>
                        <p data-id="371500">聊城市</p>
                        <p data-id="530700">丽江市</p>
                        <p data-id="451300">来宾市</p>
                        <p data-id="510500">泸州市</p>
                        <p data-id="530900">临沧市</p>
                        <p data-id="469033">乐东黎族自治县</p>
                        <p data-id="511100">乐山市</p>
                        <p data-id="620100">兰州市</p>
                        <p data-id="450200">柳州市</p>
                        <p data-id="513400">凉山彝族自治州</p>
                        <p data-id="469034">陵水黎族自治县</p>
                        <p data-id="542600">林芝地区</p>
                        <p data-id="469028">临高县</p>
                        <p data-id="540100">拉萨市</p>
                        <p data-id="520200">六盘水市</p>
                        <p data-id="621200">陇南市</p>
                        <p data-id="622900">临夏回族自治州</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="M1">M</span>
                        <p data-id="231000">牡丹江市</p>
                        <p data-id="340500">马鞍山市</p>
                        <p data-id="510700">绵阳市</p>
                        <p data-id="511400">眉山市</p>
                        <p data-id="440900">茂名市</p>
                        <p data-id="441400">梅州市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="N1">N</span>
                        <p data-id="320100">南京市</p>
                        <p data-id="330200">宁波市</p>
                        <p data-id="320600">南通市</p>
                        <p data-id="360100">南昌市</p>
                        <p data-id="411300">南阳市</p>
                        <p data-id="350700">南平市</p>
                        <p data-id="350900">宁德市</p>
                        <p data-id="350583">南安市</p>
                        <p data-id="542400">那曲地区</p>
                        <p data-id="450100">南宁市</p>
                        <p data-id="511300">南充市</p>
                        <p data-id="511000">内江市</p>
                        <p data-id="533300">怒江傈僳族自治州</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="P1">P</span>
                        <p data-id="211100">盘锦市</p>
                        <p data-id="360300">萍乡市</p>
                        <p data-id="410400">平顶山市</p>
                        <p data-id="410900">濮阳市</p>
                        <p data-id="350300">莆田市</p>
                        <p data-id="510400">攀枝花市</p>
                        <p data-id="530800">普洱市</p>
                        <p data-id="620800">平凉市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="Q1">Q</span>
                        <p data-id="130300">秦皇岛市</p>
                        <p data-id="230200">齐齐哈尔市</p>
                        <p data-id="230900">七台河市</p>
                        <p data-id="350500">泉州市</p>
                        <p data-id="429005">潜江市</p>
                        <p data-id="370200">青岛市</p>
                        <p data-id="330800">衢州市</p>
                        <p data-id="441800">清远市</p>
                        <p data-id="522700">黔南布依族苗族自治州</p>
                        <p data-id="450700">钦州市</p>
                        <p data-id="530300">曲靖市</p>
                        <p data-id="522300">黔西南布依族苗族自治州</p>
                        <p data-id="621000">庆阳市</p>
                        <p data-id="522600">黔东南苗族侗族自治州</p>
                        <p data-id="469002">琼海市</p>
                        <p data-id="469036">琼中黎族苗族自治县</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="R1">R</span>
                        <p data-id="320682">如皋市</p>
                        <p data-id="371082">荣成市</p>
                        <p data-id="371100">日照市</p>
                        <p data-id="542301">日喀则市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="S1">S</span>
                        <p data-id="220300">四平市</p>
                        <p data-id="231200">绥化市</p>
                        <p data-id="220700">松原市</p>
                        <p data-id="320500">苏州市</p>
                        <p data-id="310100">上海市</p>
                        <p data-id="321300">宿迁市</p>
                        <p data-id="330600">绍兴市</p>
                        <p data-id="140600">朔州市</p>
                        <p data-id="230500">双鸭山市</p>
                        <p data-id="210100">沈阳市</p>
                        <p data-id="330682">上虞市</p>
                        <p data-id="130100">石家庄市</p>
                        <p data-id="440500">汕头市</p>
                        <p data-id="350400">三明市</p>
                        <p data-id="429021">神农架林区</p>
                        <p data-id="361100">上饶市</p>
                        <p data-id="411400">商丘市</p>
                        <p data-id="421300">随州市</p>
                        <p data-id="341300">宿州市</p>
                        <p data-id="411200">三门峡市</p>
                        <p data-id="420300">十堰市</p>
                        <p data-id="440300">深圳市</p>
                        <p data-id="430500">邵阳市</p>
                        <p data-id="440200">韶关市</p>
                        <p data-id="441500">汕尾市</p>
                        <p data-id="510900">遂宁市</p>
                        <p data-id="611000">商洛市</p>
                        <p data-id="542200">山南地区</p>
                        <p data-id="460200">三亚市</p>
                        <p data-id="640200">石嘴山市</p>
                        <p data-id="659001">石河子市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="T1">T</span>
                        <p data-id="140100">太原市</p>
                        <p data-id="211200">铁岭市</p>
                        <p data-id="220500">通化市</p>
                        <p data-id="130200">唐山市</p>
                        <p data-id="320585">太仓市</p>
                        <p data-id="120100">天津市</p>
                        <p data-id="321200">泰州市</p>
                        <p data-id="150500">通辽市</p>
                        <p data-id="331000">台州市</p>
                        <p data-id="370900">泰安市</p>
                        <p data-id="429006">天门市</p>
                        <p data-id="340700">铜陵市</p>
                        <p data-id="522201">铜仁市</p>
                        <p data-id="469026">屯昌县</p>
                        <p data-id="610200">铜川市</p>
                        <p data-id="620500">天水市</p>
                        <p data-id="654200">塔城地区</p>
                        <p data-id="659003">图木舒克市</p>
                        <p data-id="652100">吐鲁番地区</p>
                        <p data-id="710100">台湾</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="W1">W</span>
                        <p data-id="330300">温州市</p>
                        <p data-id="320200">无锡市</p>
                        <p data-id="150900">乌兰察布市</p>
                        <p data-id="150300">乌海市</p>
                        <p data-id="340200">芜湖市</p>
                        <p data-id="420100">武汉市</p>
                        <p data-id="370700">潍坊市</p>
                        <p data-id="371000">威海市</p>
                        <p data-id="469006">万宁市</p>
                        <p data-id="610500">渭南市</p>
                        <p data-id="469005">文昌市</p>
                        <p data-id="469001">五指山市</p>
                        <p data-id="620600">武威市</p>
                        <p data-id="450400">梧州市</p>
                        <p data-id="532600">文山壮族苗族自治州</p>
                        <p data-id="659004">五家渠市</p>
                        <p data-id="640300">吴忠市</p>
                        <p data-id="650100">乌鲁木齐市</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="X1">X</span>
                        <p data-id="140900">忻州市</p>
                        <p data-id="152500">锡林郭勒盟</p>
                        <p data-id="130500">邢台市</p>
                        <p data-id="152200">兴安盟</p>
                        <p data-id="320300">徐州市</p>
                        <p data-id="410700">新乡市</p>
                        <p data-id="420600">襄阳市</p>
                        <p data-id="360500">新余市</p>
                        <p data-id="411500">信阳市</p>
                        <p data-id="429004">仙桃市</p>
                        <p data-id="411000">许昌市</p>
                        <p data-id="430300">湘潭市</p>
                        <p data-id="350200">厦门市</p>
                        <p data-id="341800">宣城市</p>
                        <p data-id="420900">孝感市</p>
                        <p data-id="421200">咸宁市</p>
                        <p data-id="433100">湘西土家族苗族自治州</p>
                        <p data-id="610100">西安市</p>
                        <p data-id="610400">咸阳市</p>
                        <p data-id="532800">西双版纳傣族自治州</p>
                        <p data-id="630100">西宁市</p>
                        <p data-id="810100">香港特别行政区</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="Y1">Y</span>
                        <p data-id="320282">宜兴市</p>
                        <p data-id="222400">延边朝鲜族自治州</p>
                        <p data-id="321000">扬州市</p>
                        <p data-id="140800">运城市</p>
                        <p data-id="320900">盐城市</p>
                        <p data-id="140300">阳泉市</p>
                        <p data-id="330281">余姚市</p>
                        <p data-id="230700">伊春市</p>
                        <p data-id="210800">营口市</p>
                        <p data-id="370600">烟台市</p>
                        <p data-id="420500">宜昌市</p>
                        <p data-id="430600">岳阳市</p>
                        <p data-id="360900">宜春市</p>
                        <p data-id="430900">益阳市</p>
                        <p data-id="330782">义乌市</p>
                        <p data-id="360600">鹰潭市</p>
                        <p data-id="431100">永州市</p>
                        <p data-id="450900">玉林市</p>
                        <p data-id="511800">雅安市</p>
                        <p data-id="530400">玉溪市</p>
                        <p data-id="441700">阳江市</p>
                        <p data-id="610800">榆林市</p>
                        <p data-id="511500">宜宾市</p>
                        <p data-id="445300">云浮市</p>
                        <p data-id="610600">延安市</p>
                        <p data-id="654000">伊犁哈萨克自治州</p>
                        <p data-id="640100">银川市</p>
                        <p data-id="632700">玉树藏族自治州</p>
                    </div>
                    <div class="city-list"><span class="city-letter" id="Z1">Z</span>
                        <p data-id="130700">张家口市</p>
                        <p data-id="330681">诸暨市</p>
                        <p data-id="321100">镇江市</p>
                        <p data-id="320582">张家港市</p>
                        <p data-id="211300">朝阳市</p>
                        <p data-id="430800">张家界市</p>
                        <p data-id="410100">郑州市</p>
                        <p data-id="370400">枣庄市</p>
                        <p data-id="330900">舟山市</p>
                        <p data-id="440183">增城市</p>
                        <p data-id="440400">珠海市</p>
                        <p data-id="411600">周口市</p>
                        <p data-id="370300">淄博市</p>
                        <p data-id="430200">株洲市</p>
                        <p data-id="350600">漳州市</p>
                        <p data-id="411700">驻马店市</p>
                        <p data-id="440800">湛江市</p>
                        <p data-id="520300">遵义市</p>
                        <p data-id="510300">自贡市</p>
                        <p data-id="530600">昭通市</p>
                        <p data-id="441200">肇庆市</p>
                        <p data-id="442000">中山市</p>
                        <p data-id="620700">张掖市</p>
                        <p data-id="512000">资阳市</p>
                        <p data-id="640500">中卫市</p>
                    </div>
                </div>
                <div class="letter">
                    <ul>
                        <li><a href="javascript:;">A</a></li>
                        <li><a href="javascript:;">B</a></li>
                        <li><a href="javascript:;">C</a></li>
                        <li><a href="javascript:;">D</a></li>
                        <li><a href="javascript:;">E</a></li>
                        <li><a href="javascript:;">F</a></li>
                        <li><a href="javascript:;">G</a></li>
                        <li><a href="javascript:;">H</a></li>
                        <li><a href="javascript:;">J</a></li>
                        <li><a href="javascript:;">K</a></li>
                        <li><a href="javascript:;">L</a></li>
                        <li><a href="javascript:;">M</a></li>
                        <li><a href="javascript:;">N</a></li>
                        <li><a href="javascript:;">P</a></li>
                        <li><a href="javascript:;">Q</a></li>
                        <li><a href="javascript:;">R</a></li>
                        <li><a href="javascript:;">S</a></li>
                        <li><a href="javascript:;">T</a></li>
                        <li><a href="javascript:;">W</a></li>
                        <li><a href="javascript:;">X</a></li>
                        <li><a href="javascript:;">Y</a></li>
                        <li><a href="javascript:;">Z</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--约见日期-->
        <div class="type" style="margin-top: 2px;">
            <span>
               约见日期
           </span>

           <span class="typespan"><input id="demo1" type="text" readonly="" placeholder="选择日期" data-lcalendar="2016-05-11,2016-05-11" /><i class="iconfont icon-more icon-mymore"></i></span>
       </div>
       <div class="contact_info">
        联系人信息
    </div>
    <div class="info">
        <div class="infodiv">
            <div>姓名</div>
            <div>
                <input type="" name="" id="yu_yue_name" placeholder="请输入姓名" />
            </div>
        </div>
        <div class="infodiv">
            <div>手机号</div>
            <div>
                <input type="" name="" id="yu_yue_tel" placeholder="请输入手机号" />
            </div>
        </div>
        <div class="infodiv">
            <div>备注</div>
            <div class="note" id="order_note" contenteditable="true">
                请写下您的其他诉求（300字以内）
            </div>
        </div>
    </div>
    <div class="rule">
        预约规则
    </div>
    <!--身体的结束按钮-->
</div>
<!--/*固定在底部的立即预约按钮*/-->
<div class="pay">
    <div>
        <span>支付:</span>
        <span class="red">31231秒</span>
    </div>
    <div id="Immediately">
        立即预约
    </div>
</div>
<!--最外侧的div结束-->
</div>
<!--转让购买支付的弹出框-->
<div class="zhuangranggoumai_pay">
    <div class="buy_pay_bottom">
        <div class="buy_pay_bottom_shang">
            <div class="buy_pay_bottom_shang_1">
                <!--微信支付-->
                <div class="buy_pay_bottom_shang_1_center">
                    <div id="shang_1_center">
                        <div class="buy_pay_bottom_shang_1_center_img">
                            <img src="../commonimg/微信支付 @2x.png" />
                        </div>
                        <div class="buy_pay_bottom_shang_1_center_name">
                            微信支付
                        </div>
                    </div>
                </div>
            </div>
            <!--支付宝支付-->
            <div class="buy_pay_bottom_shang_1">
                <div class="buy_pay_bottom_shang_1_center">
                    <div id="shang_1_center">
                        <div class="buy_pay_bottom_shang_1_center_img">
                            <img src="../commonimg/支付宝支付@2x.png" />
                        </div>
                        <div class="buy_pay_bottom_shang_1_center_name">
                            支付宝支付
                        </div>
                    </div>
                </div>
            </div>
            <!--秒星支付-->
            <div class="buy_pay_bottom_shang_1" style="border: none;">
                <div class="buy_pay_bottom_shang_1_center">
                    <div id="shang_1_center">
                        <div class="buy_pay_bottom_shang_1_center_img">
                            <img src="../commonimg/充值@3x.png" />
                        </div>
                        <div class="buy_pay_bottom_shang_1_center_name">
                            秒星支付
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buy_pay_bottom_xia">
            取消
        </div>
    </div>
</div>
<!-- 请输入支付密码的弹出框 -->
<div class="zhuangranggoumai_pay_2">
    <div class="sure_order_content_1">
        <div class="sure_order_content_word">
            请输入支付密码
        </div>
        <div class="sure_order_content_input">
            <div class="ipt-box-nick_1 mb15-nick">
                <input type="tel" maxlength="6" class="ipt-real-nick_1" autofocus="autofocus" />
                <div class="ipts-box-nick_1">
                    <div class="ipt-fake-box_1">
                        <input type="password">
                        <input type="password">
                        <input type="password">
                        <input type="password">
                        <input type="password">
                        <input type="password">
                    </div>
                </div>
                <!-- <div class="ipt-active-nick_1"><img src="https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"></div> -->
            </div>
        </div>
    </div>
</div>
<!-- 支付成功 -->
<div class="zhuanrangsucess">
    支付成功
</div>
<script src="../common_js/jquery-1.11.0.min.js"></script>
<!--公共的点击预约的加号的按钮的跳转以及点击每页左上角的跳转-->
<script src="../common_js/onclick_pop_view.js"></script>
<script src="js/password_input.js"></script>
<script src="js/LCalendar.js"></script>
<script src="js/zepto.js"></script>
<script src="../common_js/vue.js"></script>
<script src="../common_js/vue-resource.min.js"></script>
<!-- 这个是页面加载就执行ajax -->
<script type="text/javascript">
    var myvue = new Vue({
        el:"body",
        data:{
            apiurl:'http://119.23.224.92/jiandao/starInfo/starList',
            mydata:[]
        },
        ready:function(){
            this.get_data();
        },
        methods:{
            get_data:function(){
                this.$http.get(this.apiurl).then((response)=>{
                        // 响应成功的回调函数
                        // this.$set('mydata',response.data);
                        console.log(response.data);
                        // console.log(this.mydata);
                        console.log(JSON.parse(response.data));
                        var ss = JSON.parse(response.data);
                        console.log(ss.data);
                        var aa = ss.data;
                        console.log(aa.starList);
                        var ww = aa.starList;
                        this.$set('mydata',ww);
                        console.log(this.mydata);
                        console.log(ww.length)
                        for (var i = 0; i < ww.length; i++) {
                           console.log(ww[i])
                        }
                        console.log(ww[0].id);

                    },(response)=>{
                        //响应错误时的回调函数
                    })
                .catch(function(response){
                    console.log(response);
                })
            },
            alert1:function(){
                    // 在这里做操作
                    console.log(this);
                }
            }
        });
    </script>
    <script type="text/javascript">
        var calendar = new LCalendar();
        calendar.init({
        'trigger': '#demo1', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': '1900-1-1', //最小日期
        'maxDate': new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() //最大日期
    });
    //加载城市事件
    $('body').on('click', '#zone_ids,#gr_zone_ids', function() {
        var zid = $(this).attr('id');
        $('.container').show();

    });
    //选择城市 start
    $('body').on('click', '.city-list p', function() {
        var type = $('.container').data('type');
        $('#zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));
        $('#gr_zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));
        $('.container').hide();
    });
    $('body').on('click', '.letter a', function() {
        var s = $(this).html();
        $(window).scrollTop($('#' + s + '1').offset().top);
    });
</script>
<script type="text/javascript">
    //			点击每一个预约方式的变化
    var spans = $(".choose_appointment_type_2 p span");
    console.log(spans.length);
    for (var i = 0; i < spans.length; i++) {
        spans[i].onclick = function() {
            for (var h = 0; h < spans.length; h++) {
                spans[h].style.color = "rgba(107,107,107,0.40)";
                spans[h].style.borderColor = "rgba(107,107,107,0.40)";
            }
            this.style.color = "#21538D";
            this.style.borderColor = "#21538D";
        }
    };
    //			点击立即预约的跳转
    $("#Immediately").on("click", function() {
        $(".zhuangranggoumai_pay").show();
    });
    //			点击支付的时候的跳转
    $(".buy_pay_bottom_shang_1").on("click", function() {
        $(".zhuangranggoumai_pay_2").show();
        $(".zhuangranggoumai_pay").hide();
    });

    //			点击备注的时候
    $("#order_note").on("click", function() {
        $(this).html("");
    });

    $("#order_note").on("blur", function () {
    	$(this).html("请写下您的其他诉求(300字以内)");
    })
</script>

</body>

</html>
